<template>
    <view class="main">
        <view class="cover">
            <image src="/static/icon/op1.png" mode=""></image>
        </view>
        <button class="btn" open-type="getPhoneNumber" @getphonenumber="getphonenum">授权登录</button>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import { login, getUserInfo } from '@/api/apiList';

let wxCode = ref('');
let formData = reactive({
    pid: '',
    telCode: '',
    wxCode: ''
})
let isL = ref('')
onLoad((option) => {
    formData.pid = option.userId ? option.userId : ''
    isL.value = option.isL
    uni.login({
        success: (result) => {
            formData.wxCode = result.code
        }
    });
});

const getphonenum = async (e) => {
    if (e.detail.errMsg == 'getPhoneNumber:ok') {
        formData.telCode = e.detail.code
        uni.showLoading({
            mask: true,
            title: '登录中'
        });
        const res = await login(formData)
        if (res.code == 200) {
            console.log(res.data, 'res')
            uni.setStorageSync('token', res.data)
            getUser()
            if (isL.value) {
                uni.showToast({
                    title: '登录成功已加入团队',
                    icon: 'none'
                })
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            } else {
                uni.showToast({
                    title: '登录成功',
                    icon: 'none'
                })
                setTimeout(() => {
                    uni.reLaunch({
                        url: '/pages/index/index'
                    })
                }, 1500)
            }

        }
    }
};

const userInfo = ref({})
const getUser = async () => {
    const res = await getUserInfo({ userId: '' })
    if (res.code == 200) {
        userInfo.value = res.data
        uni.setStorageSync('user', userInfo.value)
    }
}
</script>

<style>
page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgb(255, 212, 212);
    background: linear-gradient(148deg, rgba(255, 212, 212, 1) 0%, rgba(246, 246, 246, 1) 44%, rgba(246, 246, 246, 1) 100%);
}
</style>

<style lang="scss" scoped>
.cover {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100rpx;

    image {
        width: 110rpx;
        height: 110rpx;
    }
}

.btn {
    width: 686rpx;
    height: 88rpx;
    background: #FB4E47;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
</style>
